
<template>
  <div class="layout">
    <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}" >
      <Menu active-name="1-2" theme="dark" width="auto" :open-names="['1']" @on-select="on_select">
        <Submenu :name="item.href" v-for="item of menu_data">
          <template slot="title">
            <Icon :type="item.icon"></Icon>
            {{ item.menu }}
          </template>
          <MenuItem :name="item_son.href"  v-for="item_son of item.child">
            {{ item_son.menu }}
          </MenuItem>
        </Submenu>
      </Menu>
    </Sider>
    <Layout :style="{marginLeft: '200px'}">
      <Content :style="{padding: '0 16px 16px'}">
        <Card>
          <div style="height: 600px" id="app">

            <router-view/>

          </div>
        </Card>
      </Content>
    </Layout>
  </div>
</template>
<script>
    export default {
        name: 'App',
        data(){
            return {
                menu_data:[]
            };
        },
        mounted(){
          this.load_menu();
        },
        methods:{
            load_menu(){
                let $this = this;
                this.$api.menu({},(resp)=>{
                    if(resp.code == 0){
                        $this.menu_data = resp.data;
                    }
                });
            },
            on_select(name){
                this.$router.push(name);
            }
        }
    }
</script>
